<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>丁美丽的主页</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="Homework.html">Homework</a></li>
        </ul>
    </div>

    <div id="home">         
        <h1>DingMeili</h1> 
        <div class="H">
            <div class="x">
                <img src="images/42.png" alt="这是基本信息" ><a href="#xiaozu"><b>My Colleage</b></a>
            </div>  
            <div class="N">
                <img src="images/wo.png" alt="这是基本信息" ><a href="#about"><b>About US</b></a>
            </div> 
            <div class="M">
                <img src="images/01.png" alt="这是基本信息" ><a href="#music"><b>My music</b></a>
            </div> 
            <div class="P">
                <img src="images/2.png" alt="这是基本信息" ><a href="#people"><b>My Love</b></a>
            </div>
              
        </div> 
    </div>
    <div class="about">
        <div class="xiaozu row">
            <div class="xa">
                <img src="images/42.png" alt="这是基本信息" id="xiaozu"><span><b>My Colleage</b></span>
            </div>
            <hr />

            <div class="xc">
                <div class="x-center">
                    <a href="https://dingmeili.gitee.io/gerenwangye">
                        <img src="images/11.jpg" alt="丁美丽" class="zu"/>                   
                    </a>
                </div>
                <h>丁美丽:</h>
                <p>一定要在平庸无奇的人生里做一个闪亮发光的疯子</p>
            </div>
            <div class="xb ">
                <div class="x-c">
                    <a href="http://lvxiangzhong.gitee.io/task">
                        <img src="images/14.jpg" alt="吕相忠"class="zu" />
                    </a> 
                </div>
                <h>吕相忠:</h>
                <p>靠谱的人千篇一律，不靠谱的人各掉各的链子。你好，我是吕相忠</p>              
            </div>
            <div class="xb ">
                <div class="x-c">
                    <a href="https://ps1026.gitee.io/graduation">
                        <img src="images/13.jpg" alt="平帅"class="zu" />
                    </a>
                </div>
                <h>平帅:</h>
                <p>生活有度，人生添寿。你好，我是平帅</p>              
            </div>
            <div class="xb ">
                <div class="x-c">
                    <a href="https://chen_yating.gitee.io/gerenwangye">
                        <img src="images/12.jpg" alt="陈雅婷"class="zu" /> 
                    </a> 
                </div>  
                <h>陈雅婷:</h>
                <p> 我想做一个漂亮的女孩，更想成为一个相处起来让人觉得[漂亮只是最小一个优点]的女孩</p>           
            </div>            
            <div class="xb ">
                <div class="x-c">
                    <a href="https://gao1123.gitee.io/task">
                        <img src="images/15.jpg" alt="高惠勒" class="zu"/>
                    </a> 
                </div> 
                <h>高惠勒:</h>
                <p>生活，可以简单点。世界，可以广阔点。你好，我是高惠勒。</p>           
            </div>
        </div>
        <div class="name">
            <div class="Na">
                <img src="images/wo.png" alt="这是基本信息" id="about"><span><b>About US</b></span>
            </div>
            <hr />
            
            <div class="Nb">
                <p>姓名：丁美丽</p>
                <p>性别：女</p>
                <p>出生日期：2015-04-31</p>
                <p>星座：金牛座</p>
                <P>新居城市：武汉</P>
                <P>职业：花钱的</P>
                <p>爱好：美食、明星、游戏、哔哩哔哩</p>
            </div>
            <!-- <div class="Nc">
                <span>联<br />系<br />方<br />式</span><img src="images/erweima.png" alt="weixinerweima" />
            </div> -->
            <div class="Nd"> <h3>个人介绍</h3>
                <p>&nbsp;&nbsp;本人忠实诚信,讲原则，说到做到，决不推卸责任；有自制力，做事情始终坚持有始有终，从不半途而废；肯学习,有问题不逃避,愿意虚心向他人学习；自信但不自负,不以自我为中心；愿意以谦虚态度赞扬接纳优越者,权威者；会用100%的热情和精力投入到工作中；平易近人。为人诚恳,性格开朗,积极进取,适应力强、勤奋好学、脚踏实地，有较强的团队精神,工作积极进取,态度认真。</p>
            </div>
            
        </div>
        <div class="music">
            <div class="Ma">
                <img src="images/01.png" alt="这是基本信息" id="music"><span><b>My music</b></span>
            </div>
            <hr />
            <div class="Mb">
            <h3>时间飞行</h3>
                <p>&nbsp;&nbsp;简介：《时间飞行》是超级网剧《镇魂》的推广曲,由张赢作词,罗锟作曲,白宇、朱一龙演唱</p>
            <img src="" alt="">
            </div>
            <div class="Mc">
                <h3>今夏</h3>
                <p>&nbsp;&nbsp;简介：于今夏，一次偶然，梦想的模样慢慢清晰。于今夏，一场遇见，未来的轮廓层层显露。即使生命，短暂如一叶知秋，白驹过隙。或，漫长似一花世界，以梦为马。终，致谢相遇的你我，无论形式与其他，在这个流火的七月，幻化成永恒的纪念，让王青&冯建宇，留给彼此和你们！独属于《今夏》的纪念！</p>
            </div>
        </div>
        <div class="people">
            <div class="pa">
                <img src="images/2.png" alt="这是基本信息" id="people"><span><b>My Love</b></span>
            </div>
            <hr />

            <div class="pb">
                <img src="images/san2.png" alt="" />               
            </div>
            <div class="pb">
                <p>微博：逍遥散人M</p>
                <p>b站ID：逍遥散人M</p>
                <p>直播：B站房间号1017</p>
                <P>居住：天津</P>
                <p>我了解的他：是活跃与bilibili弹幕网的一位游戏up主，据说是b站女粉最多的游戏up主。主要解说的游戏有I&nbsp;wanna
                    系列、以撒的结合和一些风格各异的游戏。以高难度的动作小游戏i&nbsp;wanna系列成名，因其坚持不懈的强大毅力，获称
                    “散人干不死”也是视频开头“散人games”的音译。
                    后来又因出了一系列橙光小游戏而吸引了大批女粉，最有名的是《逆袭之星途闪耀》，
                    后来这本小说被做成了网剧，每集片尾还有他的解说，可以说这本小说是因他才火的。

                </p>         
            </div>
            <div class="pb">
                <img src="images/san3 (2).jpg" alt="" />               
            </div>
        </div>
        
    </div>
    
    <footer>
        <div class="footer">
            <p>-END-</p>  
        </div>
    </footer>
    <div class="side-tool">
        <img src="images/shang.png" alt="">
        <p>回到顶部</p>
    </div>
    
    <script>
            $(window).scroll(function(){
                var scroll = $ (window).scrollTop();
                console.log(scroll);
                if(scroll>100){
                    $(".side-tool").fadeIn(300)
                }
                else{
                    $(".side-tool").fadeOut(300)
                }
            })
            $(".side-tool").click(function(){
                $("html,body").animate({scrollTop:0},300)
            })
        </script>
</body>
</html>